<template>
    <div class="topic_details com-public-pt">
        <div class="cp-container bg-white">
            <el-row :gutter="20">
                <el-col :span="18">
                    <div class="topic_details_l">
                        <div class="topic_de_body" v-html="problemData.problemInfo"></div>
                        <div class="topic_answser_pro">
                            <el-button class="btn-det" type="primary" size="mini" style="width: 120px;" @click="replayProblem('pro', '', '')">回答
                            </el-button>
                            <em>|</em>
                            <span>浏览量：<i>{{problemData.browseNum}}</i></span>
                        </div>

                        <el-dialog title="回复" :visible.sync="replay.visibile" width="80%">
                            <quill-editor :options="editorOption" ref="QuillEditor" @change="onEditorChange($event)" v-if="reFresh">
                            </quill-editor>
                            <span slot="footer" class="dialog-footer">
                            <el-button class="com-btn" @click="replayCancle">取 消</el-button>
                            <el-button type="primary" class="com-btn" :disabled="btnDisabled" @click="saveReplay" >确 定</el-button>
                        </span>
                        </el-dialog>

                        <div class="topic_ans_list" v-loading="topicLoading">
                            <ul class="strategy_body" v-if="replyData && replyData.length > 0">
                                <li v-for="(item, index) in replyData" :key="index">
                                    <div class="replay_box clearfix">
                                        <p class="inline-b"><img :src="urlCiip + (item.replyUserLogo ? item.replyUserLogo : '')" alt></p>
                                        <div class="comment_level1">
                                            <h5>{{item.replyUserName ? item.replyUserName : ''}}</h5>
                                            <div class="comment_editor" v-html="item.replyContent ? item.replyContent : ''"></div>
                                            <p class="replay_des clearfix">
                                                <span class="fl">{{item.createDate}}</span>
                                                <span class="fl" v-if="item.replyNum > 0"><i class="el-icon-edit-outline"></i>{{item.replyNum}}条评论</span>
                                                <em class="fr" @click="replayProblem('com', item.id, String(index))">评论</em>
                                                <em class="fr" v-if="item.replyNum > 0" @click="changeViewAll(item.id)">查看全部</em>
                                            </p>
                                        </div>

                                        <div class="comment_level2" v-show="viewAllComment == item.id">
                                            <dl v-if="viewAllCommentList && viewAllCommentList.length > 0">
                                                <dd class="clearfix" :key="index2" v-for="(level2, index2) in viewAllCommentList">
                                                    <p class="fl">
                                                        <img :src="urlCiip + (level2.replyUserLogo ? level2.replyUserLogo : '')" alt>
                                                    </p>
                                                    <div>
                                                        <h5>{{level2.replyUserName ? level2.replyUserName : ''}}</h5>
                                                        <div class="comment_editor" v-html="level2.replyContent ? level2.replyContent : ''"></div>
                                                        <p>
                                                            <span>{{level2.createDate}}</span>
                                                        </p>
                                                    </div>
                                                </dd>
                                            </dl>
                                        </div>
                                    </div>
                                </li>
                                <li class="noProduct_view" v-if="replyData.length == 0">
                                    <div>
                                        <p style="text-align: center;line-height: 100px;">暂无回答</p>
                                    </div>
                                </li>
                            </ul>

                            <div v-if="totalLevel1 > pageSizeLevel1" style="text-align: center;">
                                <el-pagination @current-change="handleCurrentChangeLevel1" :current-page.sync="currentPageLevel1" layout="prev, pager, next" :total="totalLevel1">
                                </el-pagination>
                            </div>

                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script lang="ts">
import {
    Vue,
    Component,
    Watch
} from 'nuxt-property-decorator'
import {
} from 'vuex-class'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import {
    getComByReplyId,
    replyQuestion,
    problemAnswers // 话题详情页 -- 回复 （通过问题id加载所有回复）
} from '~/api/community/quan/index'

@Component({
    name: 'test',
    layout: 'community',
    components: {},
    head () {
        const vthis = this as any
        return {
            title: vthis.$route.query.topicName
        }
    },
    validate ({params}) {
        return /^\d+$/.test(params.id)
    }
})
export default class PageQuanDetail extends Vue {
    reFreshNum: Number = -1
    reFresh: Boolean = true
    editorOption: any = {}
    urlCiip: String = this.$store.state.basefile
    problemData: any = {}
    viewAllComment: any = '' // 查看全部评论
    allData: any = {}
    replyData: any = []
    topicLoading: Boolean = false
    btnDisabled: Boolean = false
    totalLevel1: any = 0
    pageSizeLevel1: any = 15
    currentPageLevel1: any = 1
    replay: any = {
        id: '',
        pId: '',
        content: '',
        visibile: false,
        type: '',
        index: ''
    }
    viewAllParam: any = {
        id: '',
        replyId: ''
    }
    viewAllCommentList: any = []
    @Watch('reFreshNum')
    watchReFreshNumChange () {
        this.reFresh = false
        this.$nextTick(() => {
            this.reFresh = true
        })
    }
    // computed
    get editor () {
        return (this.$refs.QuillEditor as any).quill
    }
    /**
     * 该问题下所有回复 */
    async getAllAnwser () {
        this.topicLoading = true
        this.viewAllParam.id = this.$route.params.id
        const {data}: any = await problemAnswers(this.viewAllParam)
        if (data.code >= 0) {
            this.topicLoading = false
            this.allData = data.data
            if (this.allData.topic) {
                this.problemData = this.allData.topic
                this.replay.id = this.problemData.id
            }
            if (this.allData.replys) {
                this.replyData = this.allData.replys.slice((this.currentPageLevel1 - 1) * this.pageSizeLevel1, this.currentPageLevel1 * this.pageSizeLevel1)
                this.totalLevel1 = this.allData.replys.length
            }
        }
    }
    /**
     * 回答 */
    replayProblem (type: String, Id: Number, index: Number) {
        this.replay.visibile = true
        this.replay.type = type
        this.replay.pId = Id
        this.replay.index = index
    }
    onEditorChange ({html}: any) {
        this.replay.content = html
    }
    /**
     *  取消 */
    replayCancle () {
        this.replay.visibile = false
        this.reFreshNum = Math.floor(Math.random() * (50 - 1 + 1) + 1)
    }
    /**
     * 提交 */
    async saveReplay () {
        if (this.replay.content !== '') {
            this.btnDisabled = true
            this.replay.type === 'pro' ? this.replay.pId = '' : ''
            const {data}: any = await replyQuestion({
                replyContent: this.replay.content,
                questionId: this.replay.id,
                parentId: this.replay.pId,
                userId: this.$store.state.userinfo.id
            })
            if (data.code >= 0) {
                this.replay.visibile = false
                this.btnDisabled = false
                this.$message.success('回复成功')
                this.reFreshNum = Math.floor(Math.random() * (50 - 1 + 1) + 1)
                if (this.replay.type === 'pro') {
                    this.getAllAnwser()
                } else {
                    this.getComByReplyIdFn(this.replay.pId)
                }
            }
        } else {
            this.$message.error('请输入回复内容')
        }
    }
    async getComByReplyIdFn (Id: any) {
        const {data}: any = await getComByReplyId({id: Id})
        if (data.code >= 0) {
            const _index = this.replay.index
            if (data.data) {
                this.$set(this.replyData[_index], 'nodes', data.data)
                this.viewAllComment = this.replay.pId
                this.getAllAnwser()
            }
        }
    }
    /**
     * 查看全部 */
    async changeViewAll (id: any) {
        this.viewAllComment = id
        this.viewAllParam.id = this.$route.params.id
        this.viewAllParam.replyId = id
        const {data}: any = await problemAnswers(this.viewAllParam)
        if (data.code >= 0) {
            this.viewAllCommentList = data.data.replys
        }
    }
    handleCurrentChangeLevel1 (val: any) {
        this.currentPageLevel1 = val
        this.getAllAnwser()
    }
    // mounted
    async mounted () {
        await this.getAllAnwser()
    }
}
</script>

<style lang="scss" scoped>
    $orange: #ddd;
    $blueColor: #11a9e8;
    $white: #fff;
    .topic_details {
        padding: 20px 0;
        background: #f8f8f8;
        .bg-white{
            padding: 20px;
            background: #fff;
        }
    }

    p.capsuleItem {
        color: $blueColor;
        padding: 0 10px;
        font-size: 14px;
        line-height: 28px;
        margin-left: 20px;
        position: relative;
        border-radius: 30px;
        display: inline-block;
        border: 1px solid #ccc;

        &:first-child {
            margin-left: 0;
        }

        &.cur, &:hover {
            color: #fff;
            border-color: $blueColor;
            background-color: $blueColor;

            a {
                color: $white;
            }
        }

        a {
            color: $orange;
        }

        i {
            top: -6px;
            color: #ccc;
            right: -17px;
            cursor: pointer;
            font-size: 16px;
            position: absolute;

            &:hover {
                color: red;
            }
        }
    }

    .topic_details_l {
        width: 860px;

        em, i {
            font-style: normal;
        }

        .topic_answser_pro {
            margin-top: 20px;

            em {
                color: #999;
                margin: 0 15px;
            }

            span, i {
                color: #999;
            }
        }
    }

    .problem_tit {
        line-height: 40px;

        h4 {
            font-size: 16px;
        }

        span {
            height: 30px;
            color: $blueColor;
            padding: 0 13px;
            line-height: 30px;
            border-radius: 30px;
            box-sizing: border-box;
            border: 1px solid $blueColor;
        }
    }

    .topic_de_body {
        p {
            line-height: 24px;
        }
        img{
            max-width: 100%!important;
        }
    }

    .topic_ans_list {
        .strategy_body {
            margin-top: 10px;

            li {
                margin-top: 20px;
                padding-bottom: 10px;
                border-bottom: 1px solid #ddd;

                &:last-child {
                    border: 0;
                }

                h4 {
                    line-height: 40px;
                    color: $blueColor;
                    font-size: 16px;
                }

                .replay_box {
                    .inline-b,.comment_level1{
                        display: inline-block!important;
                        vertical-align: top!important;
                    }
                    .inline-b {
                        width: 40px;
                        height: 40px;
                        background-color: #f0f0f0;
                        line-height: 24px;
                        border-radius: 50%;
                        overflow: hidden;
                        text-align: center;
                        line-height: 40px;

                        img {
                            width: 100%;
                            max-height: 100%;
                            display: inline-block;
                        }
                    }

                    .comment_level1 {
                        width: 750px;
                        p {
                            line-height: 30px;

                            span {
                                color: #999;
                                margin: 0 5px;
                            }

                            em {
                                cursor: pointer;
                                color: $blueColor;
                                font-style: normal;

                                &:last-child {
                                    margin-right: 15px;
                                }
                            }
                        }

                        .replay_des {
                            margin-top: 15px;
                            .fl{
                                float: left;
                            }
                            .fr{
                                float: right;
                            }
                            span {
                                margin-right: 10px;

                                i {
                                    margin-right: 4px;
                                }
                            }
                        }

                        .comment_editor {
                            p {
                                line-height: 26px;

                                img {
                                    margin: 10px 0;
                                }
                            }
                        }
                    }
                }

                .comment_level2 {
                    margin-left: 50px;
                    padding: 10px 15px;
                    background-color: #f8f8f8;

                    dd {
                        padding: 10px 0;
                        border-bottom: 1px solid #ddd;

                        &:last-child {
                            border: 0;
                        }

                        & > p {
                            width: 30px;
                            height: 30px;
                            margin-left: 5px;
                            border-radius: 50%;
                            line-height: 30px;
                            text-align: center;
                            overflow: hidden;
                            background-color: #666;

                            img {
                                width: 100%;
                                max-height: 100%;
                                display: inline-block;
                            }
                        }

                        & > div {
                            padding-left: 45px;

                            h5 {
                                line-height: 30px;
                            }

                            p {
                                line-height: 24px;
                                margin-top: 10px;

                                span {
                                    color: #999;
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .attend_right {
        width: 300px;
        padding-left: 900px;

        .attend_right_title {
            border: 1px solid #ccc;
            box-sizing: border-box;

            ul {
                min-height: 100px;
            }

            h4 {
                font-size: 18px;
                padding: 0 20px;
                line-height: 40px;
                background-color: #f8f8f8;
            }
        }

        .topicSquare {
            div {
                padding: 20px 20px 20px 0;
                box-sizing: border-box;

                p {
                    margin: 5px 0 5px 20px;

                    &:first-child {
                        margin-left: 20px;
                    }
                }
            }
        }

        .knowledge {
            margin-top: 20px;

            ul {
                li {
                    padding: 0 20px;
                    padding-bottom: 8px;
                    border-bottom: 1px solid #dddddd;

                    &:last-child {
                        border-bottom: 0;
                    }

                    .knowledge_title {
                        line-height: 28px;

                        &.cur,
                        &:hover {
                            color: $blueColor;
                        }
                    }

                    a {
                        color: #999;

                        &:hover {
                            color: $orange;
                        }
                    }

                    p:last-child {
                        color: #999;
                        font-size: 12px;
                    }
                }
            }

            div {
                margin: 20px 0;
                text-align: center;

                button {
                    width: 120px;
                    height: 30px;
                    color: $blueColor;
                    cursor: pointer;
                    border-radius: 0;
                    line-height: 30px;
                    background-color: none;
                    border: 1px solid $blueColor;
                }
            }
        }
    }

    .topic_de_body /deep/ {
        img {
            max-width: 100%;
        }
    }

    .topic_details /deep/ .comment_editor {
        p {
            line-height: 26px !important;

            img {
                max-width: 100%;
                height: auto;
                margin: 10px 0 !important;
            }
        }
    }

    .btn-det {
        padding: 10px 0;
    }
</style>
